<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="/css/el.css">
  <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="/js/el.js"></script>
  <script src="/js/axios.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      padding: 50px;
      text-align: center;
    }

    .declare {
      width: 100%;
      height: 600px;
      display: inline-block;
      text-align: left;
    }

    .tabel .cell{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="declare">
    <div>
      <el-input v-model="pId" placeholder="请输入项目编号" style="width: 15%;"></el-input>
      <el-select v-model="declare.year" filterable placeholder="请选择年度区间">
        <el-option v-for="item in years" :key="item.yearId" :label="item.yearName"
                   :value="item.yearId">
        </el-option>
      </el-select>
      <el-select v-model="declare.month" filterable placeholder="请选择月度区间">
        <el-option v-for="item in months" :key="item.intervalId" :label="item.intervalName"
                   :value="item.intervalId">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="queryProject">查询</el-button>
    </div>
    <div style="margin-top: 20px;">
      <el-tabs @tab-click="stateSwitch">
        <el-tab-pane label="待审核"></el-tab-pane>
        <el-tab-pane label="驳回"></el-tab-pane>
        <el-tab-pane label="通过"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="margin-top: 5px;min-height: 600px;" class="tabel">
      <el-table :data="DeclareInformation" border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">

            <div style="padding: 0 10px;box-sizing: border-box">
              <el-descriptions class="margin-top" :column="3" :size="size" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    申报单号
                  </template>
                  {{props.row.declareId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    申报事项
                  </template>
                  {{props.row.declareName}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    申报人
                  </template>
                  {{props.row.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    经费项目
                  </template>
                  {{props.row.pname}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    报销金额
                  </template>
                  {{props.row.money}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    会计年度
                  </template>
                  {{props.row.yearName}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    会计区间
                  </template>
                  {{props.row.intervalName}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    填报人手机号
                  </template>
                  {{props.row.phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    填报时间
                  </template>
                  {{props.row.creationTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-caret-right"></i>
                    申报说明
                  </template>
                  {{props.row.supplement}}
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="text-align: right;margin-top: 10px;padding: 0 10px;box-sizing: border-box;">
              <el-popover
                      placement="top"
                      width="160"
                      v-model="visible">
                <p>确定要驳回{{props.row.name}}的申报信息吗?</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="danger" size="mini" @click="visibleClose(props.row)">确定</el-button>
                </div>
                <el-button v-if="declare.state === 2" type="danger" slot="reference">驳回申报</el-button>
              </el-popover>
              <el-button type="success" v-if="declare.state === 2" @click="declareSuccess(props.row)">申报通过</el-button>
              <el-button type="danger" v-if="declare.state === 4" @click="revokeSuccess(props.row)">撤销申报</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="declareId" label="申报编号">
        </el-table-column>
        <el-table-column prop="declareName" label="申报事项">
        </el-table-column>
        <el-table-column prop="name" label="申报人">
        </el-table-column>
        <el-table-column prop="pname" label="经费项目">
        </el-table-column>
        <el-table-column prop="money" label="报销金额">
        </el-table-column>
        <el-table-column prop="yearName" label="会计年度">
        </el-table-column>
        <el-table-column prop="intervalName" label="会计区间">
        </el-table-column>
        <el-table-column prop="phone" label="填报人手机号">
        </el-table-column>
        <el-table-column prop="balance" label="经费项目余额">
        </el-table-column>
        <el-table-column prop="creationTime" label="填报时间">
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 20px">
      <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    created(){
      this.getYearAndMonth();
    },
    data() {
      return {
        pId: "",
        years: [],
        months:[],
        lock:false,
        declare:{
          year:'',
          month:'',
          state:2
        },
        total:0,
        currentPage:1,
        DeclareInformation:[],
        visible:false
      }
    },
    methods:{
      revokeSuccess(row){
        if(!this.lock){
          this.lock = true;
          const formData = new FormData();
          formData.append("declareId", row.declareId);
          axios.post("/declare/revokeSuccess",formData)
                  .then((response)=>{
                    response = response.data;
                    if(response.code === 403){
                      location.href = "/page/logonPage"
                    }else if(response.code !== 200){
                      this.$message.error(response.message);
                    }else{
                      this.$message({
                        message: '撤销申报成功',
                        type: 'success'
                      });
                    }
                  }).finally(() =>{
            this.lock = false;
            this.getDeclareInformation();
          })
        }
      },
      declareSuccess(row){
        if(!this.lock){
          this.lock = true;
          const formData = new FormData();
          formData.append("declareId", row.declareId);
          axios.post("/declare/declareSuccess",formData)
                  .then((response)=>{
                    response = response.data;
                    if(response.code === 403){
                      location.href = "/page/logonPage"
                    }else if(response.code !== 200){
                      this.$message.error(response.message);
                    }else{
                      this.$message({
                        message: '成功通过申报',
                        type: 'success'
                      });
                    }
                  }).finally(() =>{
            this.lock = false;
            this.getDeclareInformation();
          })
        }
      },
      rejectDeclare(row){
        if(!this.lock){
          this.lock = true;
          const formData = new FormData();
          formData.append("declareId", row.declareId);
          axios.post("/declare/rejectDeclare",formData)
                  .then((response)=>{
                    response = response.data;
                    if(response.code === 403){
                      location.href = "/page/logonPage"
                    }else if(response.code !== 200){
                      this.$message.error(response.message);
                    }else{
                      this.$message({
                        message: '驳回成功',
                        type: 'success'
                      });
                    }
                  }).finally(() =>{
            this.lock = false;
            this.getDeclareInformation();
          })
        }
      },
      visibleClose(row){
        this.rejectDeclare(row);
        this.visible = false;
      },
      getDeclareInformation(){
        if(!this.lock){
          this.lock = true;

          const formData = new FormData();
          formData.append("pId", this.pId);
          formData.append("yearId", this.declare.year);
          formData.append("intervalId", this.declare.month);
          formData.append("state", this.declare.state);
          formData.append("current", this.currentPage);
          axios.post("/declare/findByDeclareInformationAll",formData)
                  .then((response)=>{
                    response = response.data;
                    if(response.code === 403){
                      location.href = "/page/logonPage"
                    }else if(response.code !== 200){
                      this.$message.error(response.message);
                    }else{
                      this.DeclareInformation = response.data.records;
                      this.total = response.data.total;
                    }
                  }).finally(() =>{
            this.lock = false;
          })
        }
      },
      stateSwitch(tab, event){
        this.currentPage = 1;
        this.declare.state = Number(tab.index) +2;
        this.getDeclareInformation();
      },
      getYearAndMonth() {
        if(!this.lock){
          this.lock = true;
          axios.post("/financialYear/getYearAndMonth")
                  .then((response)=>{
                    response = response.data;
                    if(response.code === 403){
                      location.href = "/page/logonPage"
                    }else if(response.code !== 200){
                      this.$message.error(response.message);
                    }else{
                      this.years = response.data.year;
                      this.months = response.data.month;
                    }
                  }).finally(() =>{
            this.lock = false;
            this.getDeclareInformation();
          })
        }
      },
      queryProject(){
        this.currentPage = 1;
        this.getDeclareInformation();
      },
      currentChange(e){
        this.currentPage = e;
        this.getDeclareInformation();
      },
      prevClick(){
        if(this.currentPage-1 === 0){
          return;
        }
        this.currentPage -= 1;
        this.getDeclareInformation();
      },
      nextClick(){
        this.currentPage += 1;
        this.getDeclareInformation();
      }
    }
  })
</script>
</body>
</html>